<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备报修</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
    }
    .btns{
        display:flex;
    }
    .amap-adcombo-close{
        display:none;
    }
</style>
    <script src="js/ajax.js"></script>
</head>
<body>
<div id="container"></div>
<div id="app" style="background:white;margin:0 auto;font-size:14px;position:fixed;width:95%;bottom:10px;left:0px; margin-left: 2.5%;padding-bottom: 30px;    padding-bottom: 30px;
    z-index: 10000;
    border-radius: 5px;
    padding: 10px;">
    <div v-if="currentAddress">地址:{{currentAddress}}</div>
    <div class="btns">
        <a href="javascript:;" onclick="bangding()" style="width:40%;margin-top:20px;background:orange;"
           class="weui-btn weui-btn_primary">找熟人修</a>
        <a href="javascript:;" onclick="order()"
           style="width:40%;margin-top:20px;"
           class="weui-btn weui-btn_primary">立即下单</a>
    </div>
</div>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=9de0f0304d65ced9789df138ee312d50&plugin=AMap.AdvancedInfoWindow"></script>
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<style>
    .anim{
        animation: donghua 1.5s;
    }
    @keyframes donghua {
        0%{
            top:230px
        }
        10%{
            top:250px
        }
        20%{
            top:230px
        }
        30%{
            top:250px
        }
        40%{
            top:230px
        }
        50%{
            top:250px
        }
        60%{
            top:230px
        }
        70%{
            top:250px
        }
       80%{
            top:230px
        }
        90%{
            top:250px
        }
       100%{
            top:230px
        }
    }
</style>
<script>

    var map;

    var v = new Vue({
        el: "#app",
        data: {
            currentAddress:'',
            rps:[],
            total:0
        }
    });

    function order(){
        location = 'person_order.html';
    }


    $(function(){
        $.get("find_config",{url:
            encodeURIComponent(location.href.split('#')[0])},function(data){
            wx.config({
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId:data.appId, // 必填，公众号的唯一标识
                timestamp:data.timestamp.substring(10) , // 必填，生成签名的时间戳
                nonceStr: data.nonceStr.substring(9), // 必填，生成签名的随机串
                signature: data.signature.toLowerCase(),// 必填，签名
                jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
            });
        });

        wx.ready(function(){
            wx.getLocation({
                type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度

                    drawMap(latitude,longitude);

                    findCurrentAddress(latitude,longitude);
                }
            });
        });
    });

    findCurrentAddress(31.8447100000,117.2954400000);
   drawMap(31.8447100000,117.2954400000)
    function findCurrentAddress(lat,lon){
        $.ajax({
            url: 'https://restapi.amap.com/v3/geocode/regeo?output=j' +
            'son&location='+lon+','+lat +
            '&key=64de9aeaf57718bdeb887efb2a80e30d&radius=1000&extensions=all',
            type: 'get',
            dataType: "jsonp",
            success: function (data) {
                //console.log(data.regeocode.formatted_address);
                v.currentAddress = data.regeocode.formatted_address;
            }
        });
    }

    function drawMap(lat,lon){
        map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom:18, //初始化地图层级,
            center: [lon, lat] //初始化地图中心点
        });

        var marker = new AMap.Marker({
            position: [lon,lat]
        });
        marker.setMap(map);

        $.get("/find_top_repair_man?p=1&size=5",null,function(data){
//            v.total = data.totalElements;
//            v.rps = data.content


            var rpEles = "";
            for(var i=0;i<data.content.length;i++){
                rpEles += "<div style='font-size:14px;flex:1;text-align: center;padding-top:20px;'>" +
                    "<img style='border-radius: 100%' width='60%' src='https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_x2_5869f49.png' /><br />"+data.content[i].name+"</div>";
            }

            var content = '<div style="text-align:center;font-size:14px">已为您找到维修工程师('+data.totalElements+')</div><div id="floatEle" onclick="test()" ' +
                'style="display:flex;width:300px;height:100px;background:white;border-radius:5px;opacity:.8">'

                +rpEles+'</div>';


            var infowindow1 = new AMap.AdvancedInfoWindow({
                content: content,
                offset: new AMap.Pixel(0, -30),
                asOrigin: false,
                asDestination: false,
                placeSearch:false
            });

            infowindow1.open(map,[lon,lat])

            setTimeout(function(){

                $(".amap-info").addClass("anim")
            },3000)

        });

    }

    function test(){
        alert(1);
    }
</script>

</body>
</html>